<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Graph Explorer - Business Payout Dependencies</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <script src="https://unpkg.com/vis-network@latest/dist/vis-network.min.js"></script>
    <script>
        // Set the API base URL for port 5555
        window.API_BASE_URL = 'http://localhost:5555';
    </script>
</head>
<body>
    <div class="container">
        <header>
            <h1>Business Payout Dependency Graph Explorer</h1>
            <div class="stats" id="stats">
                Loading statistics...
            </div>
        </header>

        <div class="controls">
            <div class="search-container">
                <input type="text" id="searchInput" placeholder="Search nodes (e.g., UserClient, FeeConfig)..." />
                <button id="searchBtn">Search</button>
                <button id="clearBtn">Clear</button>
            </div>

            <div class="filters">
                <label>
                    Max Degree:
                    <input type="number" id="maxDegree" min="0" max="200" placeholder="No limit">
                </label>
                <label>
                    Depth:
                    <select id="depth">
                        <option value="1">1 level</option>
                        <option value="2">2 levels</option>
                        <option value="3">3 levels</option>
                    </select>
                </label>
                <button id="resetView">Reset View</button>
            </div>
        </div>

        <div class="main-content">
            <div class="sidebar">
                <h3>Search Results</h3>
                <div id="searchResults" class="search-results"></div>

                <h3>Top Nodes by Degree</h3>
                <div id="topNodes" class="top-nodes"></div>
            </div>

            <div class="graph-container">
                <div id="graph"></div>
                <div class="legend">
                    <h4>Node Types</h4>
                    <div><span class="legend-item" style="background: #ef4444;"></span> Center Node</div>
                    <div><span class="legend-item" style="background: #4ECDC4;"></span> Class</div>
                    <div><span class="legend-item" style="background: #FFD93D;"></span> Directory</div>
                    <div><span class="legend-item" style="background: #667eea;"></span> File</div>
                    <div><span class="legend-item" style="background: #96CEB4;"></span> Function</div>

                    <h4 style="margin-top: 15px;">Edge Types</h4>
                    <div><span class="legend-edge" style="background: #10b981;"></span> Contains</div>
                    <div><span class="legend-edge" style="background: #667eea;"></span> Imports</div>
                    <div><span class="legend-edge" style="background: #ef4444;"></span> Inherits</div>
                    <div><span class="legend-edge" style="background: #f59e0b;"></span> Invokes</div>
                    <div style="margin-top: 10px;">Node size = Degree</div>
                </div>
            </div>

            <div class="info-panel">
                <h3>Node Information</h3>
                <div id="nodeInfo">
                    <p>Select a node to view details</p>
                </div>
            </div>
        </div>
    </div>

    <script src="/static/js/app_5555.js"></script>
</body>
</html>